<template>
<afl-loading v-if="!data.ready" :width="50" :height="50" class="afl-loading" :tip-style="{ fontSize: '16px' }">
    Loading...
  </afl-loading>
  <fullScreenContainer :width="1920"
                       :height="1080"
                       bgc="transparent"
                       :delay="100" v-else>
                       <div class="container">
   <!-- 查询条件 -->
   <div class="materiel-toolbar">
        <div class="menu-wrapper">
          <el-menu mode="horizontal" defaultActive="1" class="dg-view-menu">
            <el-menu-item index="1">
              <el-icon>
                <platform/>
              </el-icon>
              {{ $t('mes.iotData') }}
            </el-menu-item>

          </el-menu>
        </div>

        <div class="menu-right">
            <el-form :inline="true" :model="formData" label-width="100px">
              <el-form-item>

                <el-date-picker style="width: 220px;margin-right:10px"
                              v-model="data.dateRange"
                              type="daterange"
                              unlink-panels
                              value-format="YYYY-MM-DD HH:mm:ss"
                              :range-separator="$t('wms.to')"
                              :start-placeholder="$t('wms.startDate')"
                              :end-placeholder="$t('wms.endDate')"
              >
              </el-date-picker>
                <el-button type="primary" @click="onSubmit">
                  <el-icon>
                    <search/>
                  </el-icon>
                  {{ $t('wms.search') }}
                </el-button>
                <el-button type="info" @click="onRest">
                  <el-icon>
                    <RefreshLeft/>
                  </el-icon>
                  {{ $t('wms.rest') }}
                </el-button>
              </el-form-item>
            </el-form>
          </div>
      </div>
  <div class="materiel-content">
        <el-table border id="out-table"
                  :data="data.rowData"
                  :fit="true" table-layout="fixed" header-align="center" stripe
                  style="width:100%;height: 100%;"
                  :header-cell-style="{color:'#000',textAlign:'center',borderColor:' #CCC',background:'#f9f9f9'}"
                  :cell-style="{textAlign: 'center'}">
            <el-table-column type="index" width="150" :label="$t('mes.seq')">

            </el-table-column>
            <el-table-column prop="process_code" :label="$t('mes.processCode')" width="300"> </el-table-column>
            <el-table-column prop="production_line_code" :label="$t('mes.productionlineCode')" width="300"/>
            <el-table-column prop="location_code" :label="$t('mes.locationcode')" width="300"> </el-table-column>
            <el-table-column prop="location_name" :label="$t('mes.locationname')" width="300"> </el-table-column>
            <el-table-column prop="material_code" :label="$t('wms.materialCode')" width="200"/>
            <el-table-column prop="qty" :label="$t('mes.qty')" />
        </el-table>
   </div>
   </div>
  </fullScreenContainer>
</template>

<script setup name="IotData">
// 引入组件，进去页面显示加载
import aflLoading from '@/components/loading'
import fullScreenContainer from '@/components/fullScreenContainer'
import { onMounted, reactive, watch, ref } from 'vue'
import { iotData } from '@/api/mesApi'
import useI18n from '@/hooks/language'
import shiftTimeCard from '@/components/mes/common/shiftTimeCard.vue'
const { t } = useI18n()
const data = reactive({
  ready: false,
  rowData: [], // 数据
  dateRange: []
})

onMounted(() => {
  data.ready = true
  getData()
  setTime()
})

// 定时10s 执行一次
const setTime = () => {
  setInterval(async () => {
    await getData()
  }, 10000)
}
// 获取数据
const getData = () => {
  if (data.dateRange.length) {
    iotData({ startTime: data.dateRange[0], endTime: data.dateRange[1] }).then((res) => {
      data.rowData = res
    })
  } else {
    iotData({}).then((res) => {
      data.rowData = res
    })
  }
}
// 表格分页
const handleSizeChange = (val) => {
  data.pagesize = val
  getData()
}

const handleCurrentChange = (val) => {
  data.currentPage = val
  getData()
}

const onSubmit = () => {
  getData()
}

const onRest = () => {
  data.dateRange = []
  getData()
}

</script>
<style scoped lang="scss">
@forward "index";

body,
#app,
#dv-full-screen-container {
  background-color: #EDF2F9
}
</style>
